<template>
<div class="page" :class="$route.name">
	<main>
		<!-- 加载动画 -->
		<Spin :class="list.length === 0? 'm-show' : 'm-hide'">
			<Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
			<div>Loading</div>
		</Spin>
		<!-- 默认显示内容 -->
		<div class="default-frame">
			<!-- 顶部操作 -->
			<div class="m-ta-c" v-if="this.$route.name != 'backendProductImage' && this.$route.name != 'talkHistoryList' && this.$route.name != 'knowledgeList'">
				<!-- 创建 -->
				<mu-button class="m-mr-3" @click="editBoxOpen()" color="blue500">创建</mu-button>
				<!-- 查询 -->
				<mu-text-field @keyup.enter="pageReload(goodsform)" class="m-pr-3" v-model="goodsform.name" label="标签名"></mu-text-field>
				<mu-button @click="pageReload('goods')" color="blueGrey500">查询</mu-button>
			</div>
            <!--顶部操作 商品图片查询-->
            	<div class="m-ta-c" v-if="this.$route.name == 'backendProductImage'">
                <!-- 图片类型 -->
                <mu-container >
                    <mu-row gutter>
						<mu-col>
							<mu-text-field class="m-pr-3" v-model="ProductImageform.name" label="搜索内容"></mu-text-field>
						</mu-col>
                        <mu-col>
							<mu-select label="图片类型" filterable v-model="ProductImageform.type" full-width>
								<mu-option v-for="item,index in imgstype" :key="item.index" :label="item.type" :value="item.index"></mu-option>
							</mu-select>
                        </mu-col>
						 <mu-col>
							<mu-select label="是否有效" filterable v-model="ProductImageform.effective" full-width>
								<mu-option v-for="item,index in effectives" :key="item.index" :label="item.type" :value="item.index"></mu-option>
							</mu-select>
                        </mu-col>
                    </mu-row>
                </mu-container>
				<mu-button class="m-mr-3" @click="editBoxOpen()" color="blue500">创建</mu-button>
				<mu-button @click="pageReload('backendProductImage')" color="blueGrey500">查询</mu-button>
			</div>
			<!-- 顶部操作 商品访问详情列表下载 -->
			<div class="m-ta-c" v-if="this.$route.name == 'talkHistoryList'">
                <mu-container >
                    <mu-row gutter>
						<mu-col>
							<mu-text-field class="m-pr-3" v-model="talkHistoryform.productName" label="商品名称"></mu-text-field>
						</mu-col>
                        <mu-col>
								<mu-date-input v-model="talkHistoryform.startDate" label="选择开始时间"  full-width no-display></mu-date-input>
                        </mu-col>
						       <mu-col>
								<mu-date-input v-model="talkHistoryform.endDate" label="选择结束时间"  full-width no-display></mu-date-input>
						
                        </mu-col>
						 <mu-col>
							<mu-select label="来源" filterable v-model="talkHistoryform.voiceSource" full-width>
								<mu-option v-for="item,index in voiceSources" :key="item.index" :label="item.type" :value="item.index"></mu-option>
							</mu-select>
                        </mu-col>
                    </mu-row>
					<mu-row gutter>
						<mu-col>
							<mu-text-field class="m-pr-3" v-model="talkHistoryform.productId" label="商品编码"></mu-text-field>
						</mu-col>
                        <mu-col>
							<mu-text-field class="m-pr-3" v-model="talkHistoryform.productId" label="昵称"></mu-text-field>
                        </mu-col>
						<mu-col>
							<mu-text-field class="m-pr-3" v-model="talkHistoryform.productId" label="操作类型"></mu-text-field>
                        </mu-col>
						 <mu-col>
							<mu-select label="昵称精确查询" filterable v-model="talkHistoryform.isPrecise" full-width>
								<mu-option v-for="item,index in isPrecises" :key="item.index" :label="item.type" :value="item.index"></mu-option>
							</mu-select>
                        </mu-col>
					</mu-row>
                </mu-container>
				<mu-button style="margin-right:20px" @click="pageReload('talkHistoryList')" color="blueGrey500">查询</mu-button>
				<mu-button @click="downloadData" color="blueGrey500">下载</mu-button>
			</div>
			<!--顶部操作 闲聊知识查询-->
            	<div class="m-ta-c" v-if="this.$route.name == 'knowledgeList'">
                <!-- 图片类型 -->
                <mu-container >
                    <mu-row gutter>
						<mu-col>
							<mu-text-field class="m-pr-3" v-model="knowledgeform.questionType" label="问题分类"></mu-text-field>
						</mu-col>
                        <mu-col>
							<mu-select label="questionGroup" filterable v-model="knowledgeform.questionGroup" full-width>
								<mu-option v-for="item,index in questionGroups" :key="item.index" :label="item.type" :value="item.index"></mu-option>
							</mu-select>
                        </mu-col>
						 <mu-col>
							<mu-text-field class="m-pr-3" v-model="knowledgeform.question" label="知识标题或问题"></mu-text-field>
                        </mu-col>
						 <mu-col>
							<mu-text-field class="m-pr-3" v-model="knowledgeform.answer" label="应答详情或解答"></mu-text-field>
                        </mu-col>
						 <mu-col>
							<mu-text-field class="m-pr-3" v-model="knowledgeform.answerTags" label="应答详情标签"></mu-text-field>
                        </mu-col>
                    </mu-row>
                </mu-container>
				<mu-button class="m-mr-3" @click="editBoxOpen()" color="blue500">创建</mu-button>
				<mu-button @click="pageReload('knowledgeList')" color="blueGrey500">查询</mu-button>
			</div>
					
			<!-- 表格 -->
			<Table border :columns="columns" :data="listView" />
			<!-- 页码 -->
			<Page class="m-ta-r m-my-3" :total="total" :page-size="limit" show-elevator show-sizer show-total @on-change="pageChange" @on-page-size-change="pageSizeChange" />
		</div>
	</main>
	<!-- 创建与修改 -->
	<Drawer class="edit-box" title="编辑框" v-model="editBox" width="500">
		<Form :model="formEditBox" :label-width="80">
			<template v-for="(o,i) in formEditBox">
				<FormItem v-if="formEditBoxInfo[i] && formEditBoxInfo[i]['type'] === 'number'" :label="formEditBoxInfo[i]['label']">
					<InputNumber v-model="formEditBox[i]" :disabled="i === 'id'"></InputNumber>
				</FormItem>
				<FormItem v-if="formEditBoxInfo[i] && formEditBoxInfo[i]['type'] === 'input'" :label="formEditBoxInfo[i]['label']">
					<Input v-model="formEditBox[i]"></Input>
				</FormItem>
				<FormItem v-if="formEditBoxInfo[i] && formEditBoxInfo[i]['type'] === 'select'" :label="formEditBoxInfo[i]['label']">
					<Select v-model="formEditBox[i]">
						<Option v-for="(o,i) in dictionary[i]" :key="i" :value="parseInt(i)">{{o}}</Option>
					</Select>
				</FormItem>
			</template>
			<FormItem>
				<Button type="primary" @click="editBoxSubmit()">提交</Button>
				<Button class="m-ml-2" @click="editBoxClose()">取消</Button>
			</FormItem>
		</Form>
	</Drawer>
</div>
</template>

<script src="./script.js"></script>
<style lang="scss" src="./style.scss" scoped></style>
